<template>
  <div class="hearder_wrap">
    <div class="wrap_main">
      <div class="nav_logo">
        <img :src="logo" alt="" />
      </div>
      <div class="nav_wrap">
        <div v-for="(item, index) in tab" :class="{active:index===num}" @click="tabs(index)">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HoneyHearder",

  data() {
    return {
        num:0,
        logo: require("@/assets/logo.png"),
        tab:["首页","蜂蜜种类","制作工艺","客户评价","关于我们"]
    };
  },

  mounted() {
    let path = this.$route.path
      if(path=="/"){
        this.num=0
      }
      if(path=="/kind" || path=="/kinddetail"){
        this.num=1
      }
      if(path=="/evaluate"){
        this.num=2
      }
      if(path=="/craft"){
        this.num=3
      }
      if(path=="/about"){
        this.num=4
      }
  },
  watch:{
    $route(to,from){
      console.log(to.path);
      if(to.path=="/"){
        this.num=0
      }
      if(to.path=="/kind" || to.path=="/kinddetail"){
        this.num=1
      }
      if(to.path=="/evaluate"){
        this.num=2
      }
      if(to.path=="/craft"){
        this.num=3
      }
      if(to.path=="/about"){
        this.num=4
      }
    }
  },

  methods: {
      tabs(index){
          this.num = index
          if(index==0){
            this.$router.push('/')
          }else if(index==1){
            this.$router.push('/kind')
          }else if(index==2){
            this.$router.push('/evaluate')
          }else if(index==3){
            this.$router.push('/craft')
          }else if(index==4){
            this.$router.push('/about')
          }
      }
  },
};
</script>

<style lang="scss" scoped>
.hearder_wrap {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #f5f8fd;
  border-bottom: 1px solid #dad6d6;
  .wrap_main {
    width: 1170px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .nav_logo {
      > img {
        width: 60px;
        height: aoto;
      }
    }
    .nav_wrap {
      display: flex;
      > div {
        translate: 2s;
        line-height: 80px;
        text-align: center;
        width: 90px;
        height: 80px;
        color: #181818;
        font-size: 14px;
        cursor: pointer;
      }
      >div:hover{
        border-bottom: 1px solid #3f8bf0;
      }
    }
  }
}
.active {
  border-bottom: 1px solid #3f8bf0;
  font-weight: bold;
  color: #3f8bf0!important;
}
</style>